<template>
	<view class="container">
		<!-- 搜索区 -->
		<view class="header_content">
			<view class="serach">
				<img class="img_search" src="/static/search.svg" />
				<input 
					class="text" 
					placeholder="请输入关键词/职位"
					v-model="keyword"
					@input="onSearch"
					>
				</input>
			</view>
		</view>
		<!-- 条件筛选区 -->
		<view class="filtrate">
			<button @click="changebtn" :class="{btnClik:isvalue}">工作区域{{isvalue?"▼":"▲"}}</button>
			<button class="space" @click="changeIndustrybtn" :class="{btnClik:isvalue2}">学历要求{{isvalue2?"▼":"▲"}}</button>
			<button @click="changeSalarybtn" :class="{btnClik:isvalue3}">工作属性{{isvalue3?"▼":"▲"}}</button>
		</view>
		<!-- 条件内容展开区===》工作区域 -->
		<view class="condition" v-if="isvalue">
			<text
			class="btn_11"
			plain
			hover-class="none"
			v-for="(item,index) in workArea || {}"
			:class="{btnClik:item.islabel}"
			@click="filterByCondition('workArea',item.value)"
			>
			{{ item.value }}
			</text>
		</view>
		<!-- 条件内容展开区===》教育要求 -->
		<view class="condition" v-if="isvalue2">
			<text
			class="btn_11"
			plain
			hover-class="none"
			v-for="(item,index) in education || {}"
			:class="{btnClik:item.islabel}"
			@click="filterByCondition('education',item.value)"
			>
			{{ item.value }}
			</text>
		</view>
		<!-- 条件内容展开区===》工作 -->
		<view class="condition" v-if="isvalue3">
			<text
			class="btn_11"
			plain
			hover-class="none"
			v-for="(item,index) in attribute || {}"
			:class="{btnClik:item.islabel}"		  
			@click="filterByCondition('attribute',item.value)"
			>
			{{ item.value }}
			</text>
		</view>
		<!-- 岗位展示区 -->
		<view class="post">
			<scroll-view 
			scroll-y
			class="scroll-box"
			>
				<!-- 单个表格 -->
				<view class="post_l100" v-for="item in filterTabelData" @click="jumpPage(item.id)">
					<image class="imgae_logo" :src="item?.logo_url"/>
					<!-- 岗位描述 -->
					<view class="text">
						<view>
							<text class="distance">{{item?.post }}</text>
							<text class="distance">【{{item?.job_attribute }}】</text>
						</view>
						<view class="text1">
							<text>{{ item?.name }}</text>
						</view>
						<view class="text1">
							<text>{{ item?.area }}</text>
							<text>/{{ item?.education }}</text>
							<text>/{{ item?.work_experience }}</text>
						</view>
					</view>
					<view class="text2">
						<text class="color">{{ item?.salary }}</text>
						<text class="text3">{{ item?.publish_time }}发布</text>
					</view>
				</view>
				<!-- 条件筛选为空时做的提示 -->
				<view class="text4" v-if="filterTabelData.length === 0 ">
					<image class="imgae_logo" src="/static/nullFound.svg" mode="heightFix"></image>
					<text class="fontsize25">抱歉,没有符合该条件的信息!</text>
				</view>
			</scroll-view>
		</view>
		<!-- 底部导航栏 -->
		<view class="footer">
			<view class="content_13">
				<image class="foot_img" src="/static/home.svg" mode="heightFix"></image>
				<text>首页</text>
			</view>
			<view class="content_13">
				<image class="foot_img" src="/static/yonghu.svg" mode="heightFix"></image>
				<text>用户</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getCurrentInstance } from 'vue'
	export default {
		created() {
			this.fetchData();
		},
		data() {
			return {
				isvalue:false,
				isvalue2:false,
				isvalue3:false,
				workArea:[
				{id:1,value:'不限',islabel:true},
				{id:2,value:'深圳',islabel:false},
				{id:3,value:'北京',islabel:false},
				{id:4,value:'贵阳',islabel:false},
				{id:5,value:'上海',islabel:false},
				],
				education:[
				{id:1,value:'不限',islabel:true},
				{id:2,value:'本科',islabel:false},
				{id:3,value:'研究生',islabel:false},
				{id:4,value:'大专',islabel:false},
				],
				attribute:[
				{id:1,value:'不限',islabel:true},
				{id:2,value:'全职',islabel:false},
				{id:3,value:'兼职',islabel:false},
				{id:4,value:'实习',islabel:false},
				],
				keyword:'',
				tabelData:null,
				filterTabelData:[],
				conditionBox:[
				{id:1,type:'workArea',value:'不限'},
				{id:2,type:'education',value:'不限'},
				{id:3,type:'attribute',value:'不限'}
				],
			}
		},
		methods: {
			changebtn(){
				this.isvalue = !this.isvalue
				this.isvalue2 = this.isvalue3 = false
			},
			changeSalarybtn(){
				this.isvalue3 = !this.isvalue3
				this.isvalue = this.isvalue2 = false
			},
			changeIndustrybtn(){
				this.isvalue2 = !this.isvalue2
				this.isvalue = this.isvalue3 = false
			},
			async fetchData(){
				try {
				const res = await this.$axios.get('http://localhost:3000/api/jobs')
				this.filterTabelData=this.tabelData = res.data;
				// this.tabelData = this.tabelData[0];
				} catch (err) {
					console.error(err)
				}
			},
			jumpPage(id){
				const params = encodeURIComponent(id);
				uni.navigateTo({
					url:`/pages/jobInformation/detailsPage?data=${params}`
				});
			},
			onSearch(){
				const kw = this.keyword.trim().toLowerCase();
				if(!kw){
					this.filterTabelData = this.tabelData;
					return
				}
				this.filterTabelData = this.tabelData.filter(item => {
					return	item.name.toLowerCase().includes(kw) ||
					item.post.includes(kw)	||
					item.area.includes(kw)
				})
				// console.log(this.filterTabelData)
				console.log("关键值:",kw)
			},
			filterByCondition(listName,kw){
				this[listName].filter(item =>{
					if(item.value === kw){
						item.islabel = true;	//让点击后的字体变高亮
						this.conditionBox.forEach( bocItem =>{
							if(bocItem.type === listName){
								bocItem.value = kw;
								// console.log("条件盒子里的值",this.conditionBox);
							}
						})
					}else{
						item.islabel = false;	//取消之前的字体高亮
					}
				})
				this.filterByConditons();
			},
			// 多条件筛选
			filterByConditons(){
				const [area, education, job_attribute] = this.conditionBox.map(c => c.value);
				// console.log("三个值",area,education,job_attribute);
				this.filterTabelData = this.tabelData.filter(item => {
					const matchArea = area === '不限' || item.area.includes(area);
					const matchEducation = education === '不限' || item.education.includes(education);
					const matchJobAttr = job_attribute === '不限' || item.job_attribute.includes(job_attribute);
					return matchArea && matchEducation && matchJobAttr;		//三个都是true时，把当前的这条信息加入到filterTabelData数组中去
				});
				console.log(this.filterTabelData);
			}
		}
	}
</script>

<style scoped>
	.container {
		/* background-color: aqua; */
	}

	.header_content {
		padding: 20rpx 40rpx;
	}

	.serach {
		padding: 10rpx 20rpx;
		border: 1px solid rgba(210, 210, 210, 1);
		color: rgba(193, 193, 193, 1);
		border-radius: 10rpx;
		font-size: 30rpx;
		display: flex;
	}

	.img_search {
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.filtrate{
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid rgba(210, 210, 210, 1);
		border-bottom: 1px solid rgba(210, 210, 210, 1);
	}
	
	.filtrate uni-button:after{
		border: none;
		background-color: transparent;
	}
	
	.filtrate uni-button{
		font-size: 25rpx;
		background-color: transparent;
		border-radius: 0;
		padding: 0 50rpx;
	}

	
	.space{
		border-left: 1px solid rgba(210, 210, 210, 1) ;
		border-right: 1px solid rgba(210, 210, 210, 1) ;
	}

	.condition{
		padding: 30rpx;
		display: flex;
	}
	
	.btnClik{
		color:rgba(64,181,255,1) ;
	}
	
	.btn_11 {
		width: 90%;
		font-size: 28rpx;
		display: inline-block;
		margin-right: 40rpx;
		border: none !important;
		background-color: transparent;
	}
	
	.post{
		/* margin-top: 30rpx; */
		padding:0 30rpx;
	}
	
	.scroll-box {
	  height: 70vh; /* 必须设置固定高度 */
	}
	
	.post_l100{
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		display: flex;
		border-bottom: 2px solid rgba(210, 210, 210, 1);
	}
		
	.imgae_logo{
		height: 100rpx;
		width: 100rpx;
		margin: 0 30rpx;
	}
	
	.post_l100 .text{
		font-size: 28rpx;
	}
	
	.distance{
		margin-right: 10rpx;
	}
	
	.text1{
		color: rgba(123,123,123,1);
	}
	
	.text2{
		flex: 1;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.text4{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
		text-align: center;
	}
	
	.color{
		font-size: 25rpx;
		color: rgba(255,64,129,1);
	}
	
	.text3{
		font-size: 24rpx;
		color: rgba(123,123,123,1);
	}
	
	.footer{
		position: absolute;
		height: 5vh;
		left: 0%;
		right: 0%;
		bottom: 0%;
		background-color: rgba(210, 210, 210, 1);
		display: flex;
		justify-content: space-between;
		padding: 0 200rpx;
	}
	
	.content_13{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.foot_img{
		height: 50rpx;
	}

</style>